<template>
    <div class="loading" v-show="show">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" :r="r" fill="none" stroke-width="2" stroke-miterlimit="10" />
        </svg>
    </div>
</template>
<script>
    export default {
        name: 'Loading',
        props: {
            show: {
                type: Boolean,
                default: false
            },
            r: {
                type: Number,
                default: 20
            }
        }
    }
</script>

<style scoped lang="stylus">
    .loading
        position : absolute
        left: 0
        right: 0
        top: 0
        bottom: 0
        background-color: #fff;
        opacity: .8
        z-index: 999
</style>